@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  
:root  {
  --background: 262.1 100% 100%;
  --foreground: 262.1 5% 10%;
  --card: 262.1 50% 100%;
  --card-foreground: 262.1 5% 15%;
  --popover: 262.1 100% 100%;
  --popover-foreground: 262.1 100% 10%;
  --primary: 262.1 88.3% 57.8%;
  --primary-foreground: 0 0% 100%;
  --secondary: 262.1 30% 90%;
  --secondary-foreground: 0 0% 0%;
  --muted: 224.10000000000002 30% 95%;
  --muted-foreground: 262.1 5% 40%;
  --accent: 224.10000000000002 30% 90%;
  --accent-foreground: 262.1 5% 15%;
  --destructive: 0 100% 50%;
  --destructive-foreground: 262.1 5% 100%;
  --border: 262.1 30% 82%;
  --input: 262.1 30% 50%;
  --ring: 262.1 88.3% 57.8%;
  --radius: 0.5rem;
}
.dark  {
  --background: 262.1 50% 10%;
  --foreground: 262.1 5% 100%;
  --card: 262.1 50% 10%;
  --card-foreground: 262.1 5% 100%;
  --popover: 262.1 50% 5%;
  --popover-foreground: 262.1 5% 100%;
  --primary: 262.1 88.3% 57.8%;
  --primary-foreground: 0 0% 100%;
  --secondary: 262.1 30% 20%;
  --secondary-foreground: 0 0% 100%;
  --muted: 224.10000000000002 30% 25%;
  --muted-foreground: 262.1 5% 65%;
  --accent: 224.10000000000002 30% 25%;
  --accent-foreground: 262.1 5% 95%;
  --destructive: 0 100% 50%;
  --destructive-foreground: 262.1 5% 100%;
  --border: 262.1 30% 50%;
  --input: 262.1 30% 50%;
  --ring: 262.1 88.3% 57.8%;
  --radius: 0.5rem;
}

}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
